<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>销售工具</el-breadcrumb-item>
                <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
            </el-breadcrumb>


            <div class="btnBox">
                <el-button type="primary" size="small" @click="addHandle">添加仓库</el-button>
                <el-input size="small" placeholder="请输入仓库名称" clearable @clear="clearInput" v-model="searchName"
                    class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="searchHandle"></el-button>
                </el-input>
            </div>

            <el-table :data="warehouseList" border style="width: 100%" height="670"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="warehouseId" label="ID" width="100"></el-table-column>
                <el-table-column prop="warehouseName" label="仓库名称"></el-table-column>
                <el-table-column prop="warehouseStatus" label="状态" width="200">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.warehouseStatus == 1">启用</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-top" @click="statusHandle(scope.row, 1)"
                            v-if="scope.row.warehouseStatus == 0" plain>启用</el-button>
                        <el-button size="small" @click="statusHandle(scope.row, 0)" icon="el-icon-bottom"
                            v-else>禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加仓库弹窗 -->
            <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="20%" top="4%" :before-close="handleClose">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="仓库名称" prop="warehouseName">
                        <el-input v-model="form.warehouseName" placeholder="请输入仓库名称" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitHandle">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
        <div class="paginationBox">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { addWarehouse, listWarehouse, getCompanylist, updateWarehouseDown } from '../../network/warehouse'
export default {
    name: 'wearhouse',
    data() {
        return {
            companyList: [],
            warehouseList: [],
            dialogVisible: false,
            form: {
                warehouseName: '',
                warehouseStatus: 1,
            },
            rules: {
                warehouseName: [
                    { required: true, message: '请输入仓库名称', trigger: 'blur' },
                ],
            },
            pageNum: 1,
            pageSize: 20,
            total: 0,
            searchName: '',
        }
    },
    created() {
        this.getList()
    },

    methods: {
        statusHandle(obj, flag) {
            updateWarehouseDown({
                warehouseId: obj.warehouseId,
                status: flag
            }).then(res => {
                if (res.flag) {
                    this.getList()
                    this.$message.success('操作成功')
                } else {
                    this.$message.warning('操作失败')
                }
            })

        },
        submitHandle() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) return;
                addWarehouse(
                    {
                        warehouseName: this.form.warehouseName,
                        warehouseStatus: this.form.warehouseStatus,
                        companyId: sessionStorage.companyId
                    })
                    .then(response => {
                        console.log(response);
                        this.handleClose()
                        this.getList();
                    })
                    .catch(error => {
                        console.error('添加仓库失败', error);
                    });
            });
        },
        addHandle() {
            this.dialogVisible = true
        },
        check(obj) {
            console.log(obj);
        },
        handleClose() {
            this.dialogVisible = false
            this.$refs.ruleForm.resetFields()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getList()
        },
        // getCompany() {
        //     const PageInfo = {
        //         pageNum: 1,
        //         pageSize: 50
        //     };
        //     getCompanylist(PageInfo)
        //         .then(res => {
        //             if (res.flag) {
        //                 this.companyList = res.data.list;
        //             }
        //         })
        //         .catch(error => {
        //             console.error('获取公司列表失败', error);
        //         });
        // }
        // ,
        getList() {
            listWarehouse({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                warehouseName: this.searchName,
                companyId: sessionStorage.companyId
            })
                .then(res => {
                    if (res.flag) {
                        this.warehouseList = res.data.list;
                        this.total = res.data.total;
                    }
                })
                .catch(error => {
                    console.error('获取仓库列表失败', error);
                });
        },

        searchHandle() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },
        clearInput() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },
    }
}
</script>

<style lang="less" scoped>
.input-with-select {
    margin-left: 15px;
    width: 300px;
}

.btnBox {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
</style>./saleOut.vue